<script setup>
import {ref} from "vue";

const a = ref(20)
const str = ref("<h1>v-html</h1>")
const arr = ref([
  {name: '张三', age: 10, gender: '男'},
  {name: 'lisi', age: 28, gender: '男'},
  {name: 'wangwu', age: 40, gender: '女'},
  {name: 'lihua', age: 12, gender: '男'},
])
const img = ref("/src/assets/vue.svg")

// const fn = ()=>{
//   alert("弹框")
// }

const msg = ref("")
function fn() {
  alert(msg.value)
  console.log(msg.value)
}
const checked= ref([])
const radio = ref("")
const selected = ref("")
</script>

<template>
  <h1>新建的Vue</h1>
  <button type="button" @click="a++">加：{{ a }}</button>
  <button type="button" @click="a--">减：{{ a }}</button>
  <br/>
  <!--v-text  -->
  <span v-text="str"></span>
  <!--v-html  -->
  <span v-html="str"></span><br/>
  <!--v-if-->
  <span v-if="a>20">a是大于20的</span>
  <span v-else-if="a<20">a是小于20的</span>
  <span v-else>a是等于20的</span><br/>
  <span v-show="a===20">v-show a是等于20的</span><br/>

  <!--v-for  -->
  <table cellspacing="0" border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr v-for="item in arr">
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.gender}}</td>
    </tr>
  </table><br/>

<!--v-bind  -->
  <img src="../assets/vue.svg">
  <img :src="img" :style="{background:'red'}"><br/>

<!--v-on  -->
  <button @click="fn">按钮</button><br/>

<!--v-model  -->
  <input v-model="msg" placeholder="填写">
  <span>{{msg}}</span><br/>

  <textarea v-model="msg"></textarea><br>
  <input type="checkbox" id="lan" value="篮球" v-model="checked">
  <label for="lan">篮球</label>
  <input type="checkbox" value="足球" v-model="checked">
  <input type="checkbox" value="羽毛" v-model="checked">
  <span>结果：{{checked}}</span><br/>

  <input type="radio" value="one" v-model="radio">
  <span>one</span>
  <input type="radio" value="two" v-model="radio">
  <span>two</span>
  <span>{{radio}}</span><br>

  <select v-model="selected">
    <option value="AAA">A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>{{selected}}</span>


</template>

<style scoped>

</style>